// 基本信息
import DialogBox from "@/components/DialogBox";
import { defineComponent, PropType } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { devSubtaskCount, devSubtaskFind } from "@/api/modules/system/devTask";
import { devTaskStatus } from "@/enums/dictEnum";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, expose }) {
		onMounted(async () => {});
		const proTable = ref<any>();
		// 表格配置项
		const columns: ColumnProps[] = [
			{ prop: "devSn", label: "SN" },
			{ prop: "progress", label: "升级进度" },
			{ prop: "status", label: "升级状态" },
			{ prop: "updateTime", label: "最后更新时间" },
			{ prop: "errorMsg", label: "失败原因" },
			{ prop: "setupData", label: "下发参数" }
		];
		const getTableList = async (params: any) => {
			return devSubtaskFind(params);
		};
		const initParam = reactive({ taskId: props.detail.id });
		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current || 1,
				pageSize: data.size
			};
		};
		const init = async (id: any) => {
			initParam.taskId = id;
			let res = await devSubtaskCount(initParam);
			if (res.code == 200) {
				state.value = res.result;
			}
		};
		const state: any = ref({ countDoing: 0, countFailed: 0, countSuccess: 0, countTimeout: 0, countTotal: 0 });
		expose({ init });
		return () => {
			return (
				<DialogBox {...attrs} width={props.width} title={props.title} hideFooter>
					<div class="flex">
						<div class="flex flex-1 justify-between pt-6 pb-6 pl-4 pr-4 m-2 border border-slate-400 rounded">
							<div>执行中</div>
							<div class="text-blue-500 font-bold">{state.value.countDoing}</div>
						</div>
						<div class="flex flex-1 justify-between pt-6 pb-6 pl-4 pr-4 m-2 border border-slate-400 rounded">
							<div>执行成功</div>
							<div class="text-green-500 font-bold">{state.value.countSuccess}</div>
						</div>
						<div class="flex flex-1 justify-between pt-6 pb-6 pl-4 pr-4 m-2 border border-slate-400 rounded">
							<div>执行失败</div>
							<div class="text-red-500 font-bold">{state.value.countFailed}</div>
						</div>
						<div class="flex flex-1 justify-between pt-6 pb-6 pl-4 pr-4 m-2 border border-slate-400 rounded">
							<div>执行超时</div>
							<div class="text-orange-500 font-bold">{state.value.countTimeout}</div>
						</div>
						<div class="flex flex-1 justify-between pt-6 pb-6 pl-4 pr-4 m-2 border border-slate-400 rounded">
							<div>设备总数</div>
							<div class=" font-bold">{state.value.countTotal}</div>
						</div>
					</div>
					<ProTable
						ref={proTable}
						title="设备列表"
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						dataCallback={dataCallback}
					>
						{{
							status: (scope: any) => {
								let maintenanceStatus = devTaskStatus.filter((item: any) => item.value == scope.row.status);
								return <el-tag type={maintenanceStatus[0].type}>{maintenanceStatus[0].label}</el-tag>;
							}
						}}
					</ProTable>
				</DialogBox>
			);
		};
	}
});
